<template>
  <div>
    <vxe-modal
      :model-value="message"
      :title="title"
      :width="width"
      :height="height"
      position="center"
      @close="closeModal"
    >
      <template #default>
        <vxe-form :data="demo.formData">
          <vxe-form-item
            title="中心频率"
            field="centerfregIn"
            :item-render="{}"
            span="14"
          >
            <template #default="{ data }">
              <input
                v-model="data.centerfregIn"
                class="center-name"
                clearable
                maxlength="20"
                @input="
                  data.centerfregIn = data.centerfregIn.replace(
                    /[^/0/1/2/3/4/5/6/7/8/9/./k/K/H/h/Z/z/M/m/G/g/]/gi,
                    ''
                  )
                "
              >
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="中频带宽"
            field="intermediateFrequencyBandwidth"
            :item-render="{}"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <input
                v-model="data.intermediateFrequencyBandwidth"
                class="center-name"
                maxlength="20"
                @input="
                  data.intermediateFrequencyBandwidth = data.intermediateFrequencyBandwidth.replace(
                    /[^/0/1/2/3/4/5/6/7/8/9/./k/K/H/h/Z/z/M/m/G/g/]/gi,
                    ''
                  )
                "
              >
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="采样率"
            field="samplerateIn"
            :item-render="{}"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <input
                v-model="data.samplerateIn"
                class="sampleratein-name"
                maxlength="20"
                @input="
                  data.samplerateIn = data.samplerateIn.replace(
                    /[^/0/1/2/3/4/5/6/7/8/9/./k/K/H/h/Z/z/M/m/G/g/]/gi,
                    ''
                  )
                "
              >
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="IQ数据起始字节"
            field="startOffset"
            :item-render="{}"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <input
                v-model="data.startOffset"
                class="sampleratein-name"
                maxlength="20"
                @input="
                  data.startOffset = data.startOffset.replace(
                    /[^/0/1/2/3/4/5/6/7/8/9/./k/K/H/h/Z/z/M/m/G/g/]/gi,
                    ''
                  )
                "
              >
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="文件末尾截断字节数"
            field="CutoffLength"
            :item-render="{}"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <input
                v-model="data.CutoffLength"
                class="sampleratein-name"
                maxlength="20"
                @input="
                  data.CutoffLength = data.CutoffLength.replace(
                    /[^/0/1/2/3/4/5/6/7/8/9/./k/K/H/h/Z/z/M/m/G/g/]/gi,
                    ''
                  )
                "
              >
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="调制样式"
            field="debugMode"
            :item-render="{}"
            span="14"
            placeholder="请选择调制样式"
            class="title-name"
          >
            <template #default="{ data }">
              <!-- <vxe-select
                v-model="data.debugMode"
                type="text"
                :options="debugModeList"
                transfer
                clearable
              /> -->
              <select
                v-model="data.debugMode"
                class="select-style"
                transfer
                clearable
              >
                <option
                  v-for="(item,index) in debugModeList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="IQ排列"
            field="IQpermutation"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <vxe-radio
                v-model="data.IQpermutation"
                name="IQpermutation"
                label="0"
                content="IQ交替"
              />
              <vxe-radio
                v-model="data.IQpermutation"
                name="IQpermutation"
                label="1"
                content="IQ连续"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="数据类型"
            field="dataType"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <vxe-radio
                v-model="data.dataType"
                name="dataType"
                label="0"
                content="2字节整数"
              />
              <vxe-radio
                v-model="data.dataType"
                name="dataType"
                label="1"
                content="4字节整数"
              />
              <vxe-radio
                v-model="data.dataType"
                name="dataType"
                label="2"
                content="8字节浮点型"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="IQ文件"
            field="IQfile"
            :item-render="{}"
            span="14"
            class="title-name"
          >
            <template #default="{ data }">
              <vxe-input v-model="data.IQfile" clearable class="file-name" />
            </template>
          </vxe-form-item>
        </vxe-form>
        <vxe-button
          status="success"
          content="浏览"
          class="browse-button"
          @click="clickEvent1"
        />
        <vxe-button
          status="info"
          content="取消"
          class="cancel-button"
          @click="closeModal"
        />
        <vxe-button
          status="primary"
          content="上传"
          class="upload-button"
          @click="insertEvent(false)"
        />
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
  import Cookies from 'js-cookie'
  import { toRefs, ref, onMounted, watch } from 'vue'
  import * as mtApi from '@/api/singalManage'
  import { VXETable } from 'vxe-table'
  //分片上传
  import { upload } from '@/api/tool/request'
  import { fileChunkList, setFileChunkList, clearFileHash } from '@/api/tool/request/file'
  const props = defineProps({
    message: {
      type: Boolean
    },
    debugmodemessage: {
      type: Array
    }
  })
  let { message } = toRefs(props)
  //监测父子传值的变化
  watch(
    () => props,
    (newVal, oldVal) => {
      debugModeList.value = oldVal.debugmodemessage
    },
    { deep: true }
  )
  const demo = reactive({
    formData: {
      visiable: 'false',
      centerfregIn: '100MHz',
      intermediateFrequencyBandwidth: '100MHz',
      samplerateIn: '50MHz',
      startOffset: '0',
      CutoffLength: '0',
      IQpermutation: '0',
      debugMode: '0',
      dataType: '0',
      IQfile: ''
    }
  })
  //上传的文件内容
  const fileContent = ref({})
  const uploadParams = ref({})
  const debugModeList = ref([])
  const fatherValue = ref(false)
  const title = ref('上传文件')
  const width = ref(700)
  const height = ref(600)
  const emit = defineEmits(['childcLick'])
  const closeModal = () => {
    emit('childcLick', false)
    clearFileHash(false, fileContent.value, uploadParams.value)
  }
  onMounted(() => {
    fatherValue.value = props.message
  })
  //获取选择的文件名称   
  const clickEvent1 = async () => {
    try {
      const { file } = await VXETable.readFile()
      fileContent.value = file
      demo.formData.IQfile = file.name
    } catch (e) { /* empty */ }
  }
  const interfaceUnitConversion = data => {
    if (/[a-zA-Z]/.test(data)) {
      return data
    } else {
      if (data / 1000 >= 0 && data / 1000 < 1000) {
        return data / 1000 + 'KHz'
      } else if (data / 1000000 > 0 && data / 1000000 < 1000) {
        return data / 1000000 + 'MHz'
      } else if (data / 1000000000 > 0) {
        return data / 1000000000 + 'GHz'
      }
      return data
    }
  }
  //上传从本地获取的文件
  const insertEvent = async () => {
    uploadParams.value.centerfregInStr = interfaceUnitConversion(demo.formData.centerfregIn)
    uploadParams.value.bwInStr = interfaceUnitConversion(
      demo.formData.intermediateFrequencyBandwidth
    )
    uploadParams.value.samplerateInStr = interfaceUnitConversion(demo.formData.samplerateIn)
    uploadParams.value.dataOrganization = demo.formData.IQpermutation
    uploadParams.value.debugMode = demo.formData.debugMode
    uploadParams.value.dataType = demo.formData.dataType
    uploadParams.value.startOffset = demo.formData.startOffset
    uploadParams.value.CutoffLength = demo.formData.CutoffLength
    uploadParams.value.coderateStr = '0KHz'
    uploadParams.value.createBy = Cookies.get("username")
    uploadFile(fileContent.value, uploadParams.value)
  }
  const chunkList = reactive(fileChunkList)
  setFileChunkList(chunkList)
  // 总进度条
  const totoalPercentage = computed(() => {
    if (!chunkList.value.length) {
      return 0
    }
    const loaded = chunkList.value
      .map(item => (item.size | 0) * (item.percentage | 0))
      .reduce((curr, next) => curr + next)
    return parseInt(loaded / file.size).toFixed(2)
  })
  // 分块进度
  const onUploadProgress = item => e => {
    // e 是后台的回调
    console.log('event', e)
    item.percentage = parseInt(String(e.loaded / e.total) * 100)
  }
  const uploadFile = async (file, parmas) => {
    await upload(file, onUploadProgress, parmas)
    fileContent.value = {}
    demo.formData.IQfile = ''
    closeModal()
  }
</script>

<style scoped>
  .sampleratein-style {
    margin: 0 13px;
    width: 315px;
  }
  .browse-button {
    float: right;
    margin: -43px 130px;
  }
  .cancel-button {
    margin: 11px 400px;
  }
  .upload-button {
    margin: 0px -373px;
  }
  .radio-name {
    margin: 0 20;
  }
  .file-name {
    margin: 0 11px;
  }
  .center-name {
    width: 100%;
    height: 32px;
    border-radius: 4px;
    outline: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    padding: 0 0.6em;
    border: 1px solid var(--chart-text-color) ;
    color: var(--chart-text-color) ;
    background-color: var(--background-color);
    box-shadow: none;
  }
  .sampleratein-name {
    width: 95%;
    height: 32px;
    border-radius: 4px;
    outline: 0;
    margin: 0 15px;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    padding: 0 0.6em;
    border: 1px solid var(--chart-text-color) ;
    color: var(--chart-text-color) ;
    background-color: var(--background-color);
    box-shadow: none;
  }
  :deep(.vxe-modal--header){
    color: var(--chart-text-color) ;
    background-color: var(--background-color);
  }
  :deep(.vxe-form--wrapper){
    color: var(--chart-text-color) ;
    background-color: var(--background-color);
  }
  :deep(.vxe-modal--content){
    color: var(--chart-text-color) ;
    background-color: var(--background-color);
  }
  .title-name {
    margin: 0 50px;
  }
  .select-style{
    background-color: var(--background-color);
    border: 1px solid var(--chart-text-color);
    border-radius: 4px;
    padding: 8px;
    color: var(--chart-text-color);
    width: 100%;
    cursor: pointer;
  }
  :deep() .vxe-modal--header-title {
    text-align: center;
  }
  :deep() .vxe-form--item {
    margin: 0 50px;
  }
</style>
